// 该组件为通用标签选择组件，被多个页面复用，已归类到 common 目录
<script setup lang="ts">
  import { ref } from 'vue'
  import { list } from '@/api/tag.ts'
  import { Tag } from '@/types'

  const value = defineModel({
    type: Array as () => Array<string | Tag>,
  })
  const { disabled } = defineProps({
    disabled: {
      type: Boolean,
      default: false,
    },
  })

  const { options, select, loading, getTags } = useElSelect()

  function useElSelect() {
    const options = ref<Tag[]>()
    const select = ref()
    const loading = ref(false)

    //获取选项的方法
    const getTags = async (name: string) => {
      if (name) {
        loading.value = true
        options.value = await list({ name })
        loading.value = false
      } else {
        options.value = []
      }
    }

    return { options, select, loading, getTags }
  }
</script>

<template>
  <el-select
    ref="select"
    v-model="value"
    filterable
    allow-create
    default-first-option
    remote
    :remote-method="getTags"
    :loading="loading"
    multiple
    :reserve-keyword="false"
    :disabled="disabled"
  >
    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.name" />
  </el-select>
</template>

<style scoped></style>
